<template>
    <div class="bg">
        <div class="login">
            <h2 class="title">李茶余的智慧后台管理平台</h2>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="login-btn" @click="submitForm(ruleFormRef)">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
// userStore变量
import { useUserStore } from '@/stores/useUserStore'

// 表单校验
const ruleFormRef = ref()
const ruleForm = reactive({
    username: "",
    password: ""
})
const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})
// 登录校验
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForm.username === "admin") {
                handleClick1()
            } else {
                handleClick2()
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const { changeUser } = useUserStore()
const router = useRouter()
const handleClick1 = () => {
    changeUser({
        "id": 1,
        "username": "admin",
        "password": "123",
        "role": {
            "roleName": "管理员",
            "roleType": 1,
            "rights": [
                "/index",
                "/user-manage",
                "/user-manage/list",
                "/right-manage",
                "/right-manage/rolelist",
                "/right-manage/rightlist",
                "/lab-manage",
                "/lab-manage/lablist",
                "/lab-manage/addlab",
                "/book-manage",
                "/book-manage/auditlist",
                "/book-manage/booklist",
                "/book-manage/addbook"
            ]
        }
    })
    router.push("/")
}
const handleClick2 = () => {
    changeUser({
        "id": 2,
        "username": "cha",
        "password": "123",
        "role": {
            "roleName": "教师",
            "roleType": 2,
            "rights": [
                "/index",
                "/book-manage",
                "/book-manage/booklist",
                "/book-manage/addbook"
            ]
        }
    })
    router.push("/")
}

</script>

<style lang="less" scoped>
.bg {
    width: 100%;
    height: 100vh;
    background-image: url(./bg.jpg);

}

.login {
    width: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    .title {
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 30px;
    }

    .login-btn {
        margin-left: 64px;
    }
}
</style>